<template>
    <view class="content" v-if="info">
        <status-bar title="支付明细" :hideBg="hideBg" :back="back"></status-bar>
        <view class="Info">
            <image :src="$imgUrls(site_time.img)" mode="aspectFill" class="Logo"></image>
            <view class="Info_box">
                <text class="black bold size28">{{ site_time.name }}</text>
                <text class="InfoTime">购买时间:{{ info.add_time }}</text>
                <text class="InfoTime">开宴时间:{{ site_time.open_date_time }}</text>
                <text class="countDown">剩余支付时间：{{ minutes }}:{{ seconds }}</text>
            </view>
        </view>

        <view class="seatInfo">
            <view class="row j-sb a-center">
                <view class="d-flex a-center">
                    <text class="seat_one">座席</text>
                    <text class="seat_two">信息</text>
                </view>
                <text class="color_33 h6">已选 {{ info.sites_detail.length }} 位</text>
            </view>

            <view class="seatList" v-for="(item, index) in info.sites_detail" :key="index">
                <view class="seatName">{{ item.type_name }}.{{ item.name }}</view>
                <view class="panBoX">
                    <view class="panlist" :class="{ Active: item.goods_id == subItem.goods_id }" v-for="(subItem, subIndex) in item.goods" :key="subIndex" @click.stop="selectSeat(index, subItem)">
                        <image :src="$imgUrls(subItem.img)" mode="aspectFill" class="panImg"></image>
                        <text class="panTxt">{{ subItem.name }}</text>
                        <view class="select">
                            <view class="iconfont icon-xuanzhong h7 bold"></view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="row j-sb a-center m-top20">
                <view class="flex-1 d-flex a-center">
                    <text class="h6">席位预估价</text>
                    <text class="color_ab5 h6">(实际支付金额以现场结算为准)</text>
                </view>
                <text class="forecastPrice">￥{{ info.forecast_price }}</text>
            </view>

            <view class="rows black size26 m-top20" v-if="pageData.child_tips">{{ pageData.child_tips }}</view>
        </view>

        <view class="assembly" v-if="make_up.length">
            <view class="row j-sb a-center">
                <view class="d-flex a-center">
                    <view class="d-flex a-center">
                        <text class="seat_one">妆造</text>
                        <text class="seat_two">预约</text>
                    </view>
                    <text class="color_33 h6 m-left20">已选({{ pageData.make_up_num }}/{{ pageData.choose_limit }})</text>
                </view>
                <text class="color_33 h6">当前余位:{{ pageData.available_make_up_num }}/{{ pageData.total_make_up_num }}</text>
            </view>

            <view class="intro color_ab5" v-if="pageData.make_up_desc">{{ pageData.make_up_desc }}</view>

            <view class="seletTime">
                <view class="timeList" :class="{ timeActive: index == make_up_index }" v-for="(item, index) in make_up" :key="index" @click.stop="make_up_index = index">
                    {{ item.time }}
                </view>
            </view>
            <view class="row m-top20" v-if="make_up.length">
                <view
                    class="whenList"
                    :class="{ Active: seletmake.indexOf(item.id) != -1 }"
                    @click.stop="selectMack(item.id, item.state)"
                    v-for="(item, index) in make_up[make_up_index].list"
                    :key="item.id"
                >
                    <text class="whenTxt">{{ item.state == 1 ? '无法预约' : '当前空闲' }}</text>
                    <view class="select">
                        <view class="iconfont h7 bold" :class="item.state == 1 ? 'icon-guanbi2' : 'icon-xuanzhong'"></view>
                    </view>
                </view>
            </view>
        </view>

        <view class="footer">
            <view class="foot">
                <view class="row a-center j-sb">
                    <text class="black size28 bold">预约联系人</text>
                    <input type="text" class="Input" v-model="user_name" placeholder-class="place" placeholder="请填写联系人" />
                    <input type="number" class="Input" v-model="user_tel" placeholder-class="place" placeholder="请填写联系电话" />
                    <!-- <view class="getPhone">
						 <button class="login_btn"
						      open-type="getPhoneNumber"
						 	@getphonenumber="getPhoneNumber">
						</button>
						 <view class="iconfont icon-iconzhengli_shouji black size40"></view>
					 </view> -->
                </view>
                <view class="botend">
                    <view class="d-flex f-column">
                        <view class="d-flex a-center color_ab5 bold">
                            <text class="h6 m-top6">定金</text>
                            <text class="size26 m-top6">￥</text>
                            <text class="size36">{{ info.payment }}</text>
                        </view>
                        <view class="d-flex a-center m-top10" @click="agree = !agree">
                            <view class="Bot" :class="{ botActive: agree }">
                                <view class="iconfont icon-xuanzhong white h6"></view>
                            </view>
                            <text class="color_99 h6 m-left6">我已阅读并同意</text>
                            <text class="agree" @click.stop="toUrl(`article?id=${pageData.article_id}`)">《取消预定协议》</text>
                        </view>
                    </view>

                    <view class="continum" @click.stop="continum">确认支付</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                order_id: '',
                pageData: '',
                site_time: '',
                info: '',
                timer: null,
                diffTime: 0,
                minutes: '',
                seconds: '',
                goods: [],
                make_up: [],
                seletmake: [],
                make_up_index: 0,

                user_name: '',
                user_tel: '',
                agree: false,
                hideBg: true
            };
        },
        onLoad(opt) {
            this.diffTime = 0;
            clearInterval(this.timer);
            this.timer = null;
            if (opt.order_id) this.order_id = opt.order_id;
            this.getLockOrder();
        },

        onShow() {
            // #ifdef MP-WEIXIN
            let that = this;
            let options = wx.getEnterOptionsSync();
            if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3') {
                let extraData = options.referrerInfo.extraData;
                if (!extraData) return;
                if (extraData.code == 'success') {
                    clearInterval(that.timer);
                    that.timer = null;
                    uni.redirectTo({
                        url: '/Reserve/Makelist',
                        complete() {
                            if (that.timer) {
                                clearInterval(that.timer);
                                that.timer = null;
                            }
                        }
                    });
                }
            }
            // #endif
        },
        methods: {
            getLockOrder() {
                let sites_choose = [];
                if (this.info) {
                    for (let i = 0; i < this.info.sites_detail.length; i++) {
                        let item = this.info.sites_detail[i];
                        let obj = {
                            id: item.id,
                            goods_id: item.goods_id,
                            make_up_id: item.make_up_id
                        };
                        sites_choose.push(obj);
                    }
                }
                this.$http
                    .get({
                        url: '/SiteApi/getLockOrder',
                        data: {
                            order_id: this.order_id,
                            sites_choose: sites_choose.length ? JSON.stringify(sites_choose) : ''
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg, 2);
                        const Result = res.data;
                        this.pageData = Result;
                        if (Result.site_time) this.site_time = Result.site_time;
                        if (Result.info) {
                            Result.info.sites_detail.forEach((item) => {
                                item.goods = Result.goods;
                            });
                        }
                        this.info = Result.info;
                        if (Result.goods) this.goods = Result.goods;
                        if (Result.make_up) this.make_up = Result.make_up;
                        if (Result.member_info) {
                            this.user_name = Result.member_info.v_name;
                            this.user_tel = Result.member_info.v_tel;
                        }
                        if (this.diffTime > 0) return;
                        if (Result.info.diffTime) {
                            this.diffTime = Number(Result.info.diffTime);
                            this.diffCountdown();
                        } else if (Result.info.expire_time) {
                            this.startCountdown(Result.info.expire_time);
                        }
                    });
            },

            continum() {
                let that = this;
                const regex = /^1[3456789]\d{9}$/;
                let sites_choose = [];
                for (let i = 0; i < this.info.sites_detail.length; i++) {
                    let item = this.info.sites_detail[i];
                    if (item.goods_id == 0 || !item.goods_id) return this.$Toast('请选择珍馐/套餐');
                    let obj = {
                        id: item.id,
                        goods_id: item.goods_id,
                        make_up_id: item.make_up_id
                    };
                    sites_choose.push(obj);
                }
                if (!this.user_name) return this.$Toast('请填写联系人');
                if (!this.user_tel) return this.$Toast('请填写联系人手机号码');
                // if (!regex.test(this.user_tel)) return this.$Toast('手机号码有误');
                if (!this.agree) return this.$Toast('未同意协议');
                this.$showLoading('');
                clearInterval(that.timer);
                that.timer = null;
                this.$http
                    .get({
                        url: '/SiteApi/payLockOrder',
                        data: {
                            order_id: this.order_id,
                            sites_choose: JSON.stringify(sites_choose),
                            user_name: this.user_name,
                            user_tel: this.user_tel
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != '100') return this.$Toast(res.msg);
                        const Result = res.data;
                        // #ifdef MP-WEIXIN
                        if (Result.extraData) {
                            wx.openEmbeddedMiniProgram({
                                appId: Result.appId,
                                extraData: Result.extraData
                            });
                            return;
                        }
                        uni.getProvider({
                            service: 'oauth',
                            success: function (resp) {
                                console.log(resp.provider);
                                if (resp.provider) {
                                    uni.requestPayment({
                                        provider: resp.provider[0],
                                        orderInfo: Result,
                                        timeStamp: Result.timeStamp,
                                        nonceStr: Result.nonceStr,
                                        package: Result.package,
                                        signType: Result.signType,
                                        paySign: Result.paySign,
                                        success: function (resj) {
                                            uni.redirectTo({
                                                url: '/Reserve/Makelist',
                                                complete() {
                                                    console.log('200');
                                                    if (that.timer) {
                                                        clearInterval(that.timer);
                                                        that.timer = null;
                                                    }
                                                }
                                            });
                                        },
                                        fail: function (err) {
                                            console.log('fail:' + JSON.stringify(err));
                                        }
                                    });
                                }
                            }
                        });
                        // #endif
                    });
            },

            selectSeat(index, subItem) {
                this.info.sites_detail[index].goods_id = subItem.goods_id;
                this.getLockOrder();
            },

            selectMack(make_up_id, state) {
                if (state == 1) return;
                const Flag = this.seletmake.some((n) => n == make_up_id);
                if (Flag) {
                    const Index = this.seletmake.findIndex((n) => n == make_up_id);
                    this.seletmake.splice(Index, 1);
                } else {
                    if (this.seletmake.length == this.info.sites_detail.length) return this.$Toast(`最多选择${this.info.sites_detail.length}位`);
                    this.seletmake.push(make_up_id);
                }

                this.pageData.make_up_num = this.seletmake.length;
                for (let i = 0; i < this.info.sites_detail.length; i++) {
                    if (this.seletmake.length > i) {
                        this.info.sites_detail[i].make_up_id = this.seletmake[i];
                    } else {
                        this.info.sites_detail[i].make_up_id = 0;
                    }
                }

                this.getLockOrder();
            },

            diffCountdown() {
                let that = this;
                if (this.timer) {
                    clearInterval(this.timer);
                    this.timer = null;
                }
                that.timer = setInterval(() => {
                    if (that.diffTime > 0) {
                        that.diffTime--;
                    } else {
                        clearInterval(that.timer);
                        that.$Toast('支付超时,请重新选座', 2);
                        return;
                    }
                    // console.log(that.diffTime,'that.diffTime');
                    let minutes = Math.floor(that.diffTime / 60) >= 10 ? Math.floor(that.diffTime / 60) : '0' + Math.floor(that.diffTime / 60);
                    let seconds = Math.floor(that.diffTime % 60) >= 10 ? Math.floor(that.diffTime % 60) : '0' + Math.floor(that.diffTime % 60);
                    that.minutes = minutes;
                    that.seconds = seconds;
                }, 1000);
            },

            startCountdown(expire_time) {
                let that = this;
                if (this.timer) {
                    clearInterval(this.timer);
                    this.timer = null;
                }
                that.timer = setInterval(() => {
                    let now = Date.now();
                    let diff = Number(expire_time) * 1000 - now;
                    console.log(diff, 'diff');
                    if (diff <= 0) {
                        clearInterval(that.timer);
                        that.$Toast('支付超时,请重新选座', 2);
                        return;
                    }
                    let remainingSeconds = Math.floor(diff / 1000);
                    let hours = Math.floor(remainingSeconds / 3600);
                    let minutes = Math.floor((remainingSeconds % 3600) / 60) >= 10 ? Math.floor((remainingSeconds % 3600) / 60) : '0' + Math.floor((remainingSeconds % 3600) / 60);
                    let seconds = remainingSeconds % 60 >= 10 ? remainingSeconds % 60 : '0' + (remainingSeconds % 60);
                    that.minutes = minutes;
                    that.seconds = seconds;
                }, 1000);
            },

            async getPhoneNumber(e) {
                let result = e.detail;
                if (result.errMsg != 'getPhoneNumber:ok') return this.$Toast('未认证');
                const jscode = await this.getProvider();
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/appletDecodePhone',
                        data: {
                            encryptedData: result.encryptedData,
                            iv: result.iv,
                            session_key: this.session_key,
                            js_code: jscode
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        this.user_tel = res.data;
                    });
            },

            getProvider() {
                return new Promise((resolve, reject) => {
                    uni.getProvider({
                        service: 'oauth',
                        success: (res) => {
                            uni.login({
                                provider: res.provider[0],
                                success: (req) => {
                                    resolve(req.code);
                                }
                            });
                        }
                    });
                });
            }
        },

        computed: {
            ...mapState(['session_key'])
        },
        onPageScroll(e) {
            this.hideBg = e.scrollTop < 50;
        },
        onUnload() {
            clearInterval(this.timer);
            this.timer = null;
        }
    };
</script>

<style lang="scss" scoped>
    page {
        background-color: #f5ecda;
    }
    .content {
        padding-bottom: 200rpx;
    }
    .Info {
        width: 690rpx;
        margin: 0 auto;
        display: flex;
    }
    .Logo {
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }
    .Info_box {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .InfoTime {
        color: #9f9994;
        font-size: 22rpx;
        margin-top: 8rpx;
    }
    .countDown {
        color: #a74743;
        font-size: 30rpx;
        font-weight: bold;
        margin-top: 8rpx;
    }
    .seatInfo {
        width: 690rpx;
        margin: 30rpx auto 0 auto;
        background-color: #fefbf6;
        border-radius: 10rpx;
        padding: 20rpx 20rpx 30rpx 20rpx;
    }
    .seatList {
        width: 100%;
    }
    .seatName {
        background-color: #eae0d1;
        height: 60rpx;
        line-height: 60rpx;
        padding: 0 24rpx;
        color: #84704c;
        font-size: 28rpx;
        display: inline-block;
        border-radius: 4rpx;
        margin-top: 24rpx;
    }
    .seat_one {
        color: #977e52;
        font-size: 34rpx;
        font-weight: bold;
    }
    .seat_two {
        color: #000;
        font-size: 34rpx;
        font-weight: bold;
    }
    .forecastPrice {
        color: #ab504c;
        font-size: 30rpx;
    }
    .panBoX {
        width: 100%;
        display: flex;
    }
    .panlist {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20rpx;
        margin-right: 24rpx;
        background-color: #fefcf1;
        box-shadow: 0 0 10rpx #ccc;
        border-radius: 10rpx;
        overflow: hidden;
        padding-bottom: 10rpx;
    }
    .panImg {
        width: 120rpx;
        height: 120rpx;
    }
    .panTxt {
        color: #aa9c81;
        font-size: 22rpx;
        padding: 6rpx 0;
    }
    .select {
        width: 34rpx;
        height: 34rpx;
        background-color: #ded8c5;
        border-radius: 50%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .icon-xuanzhong {
        color: #8d7c59;
    }
    .icon-guanbi2 {
        color: #333;
        padding-top: 4rpx;
    }
    .Active .select {
        background-color: #e0bb71;
    }
    .Active .icon-xuanzhong {
        color: #fff;
    }

    .assembly {
        width: 690rpx;
        margin: 24rpx auto 0 auto;
        background-color: #fefbf6;
        border-radius: 10rpx;
        padding: 20rpx 20rpx 30rpx 20rpx;
    }
    .intro {
        width: 100%;
        margin-top: 20rpx;
        font-size: 24rpx;
    }
    .seletTime {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .timeList {
        width: 314rpx;
        height: 70rpx;
        background-color: #f2eae7;
        border-radius: 10rpx;
        padding: 0 20rpx;
        display: flex;
        align-items: center;
        margin-top: 30rpx;
        font-size: 28rpx;
        color: #000;
        border: 2rpx solid #f2eae7;
    }
    .timeActive {
        background-color: #fff;
        border: 2rpx solid #ecdab3;
    }
    .whenList {
        width: 200rpx;
        height: 60rpx;
        background-color: #fefcf1;
        border: 1rpx solid #ecdab3;
        border-radius: 10rpx;
        padding: 10rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
    }
    .whenTxt {
        color: #aa9c81;
        font-size: 24rpx;
    }
    .whenList:nth-child(3n) {
        margin-right: 0 !important;
    }
    .footer {
        width: 100%;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
    }
    .foot {
        width: 100%;
        padding: 24rpx 30rpx 30rpx 30rpx;
        display: flex;
        flex-direction: column;
    }
    .Input {
        width: 250rpx;
        height: 60rpx;
        border: 2rpx solid #ebd5a7;
        border-radius: 10rpx;
        font-size: 26rpx;
        padding: 0 10rpx 0rpx 20rpx;
        color: #000;
    }
    .place {
        color: #ebd5a7;
    }
    .getPhone {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        background-color: #e0bb71;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .login_btn {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        background-color: transparent;
        border: none;
    }
    .login_btn::before {
        background-color: transparent;
        border: none;
    }
    .botend {
        width: 100%;
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .Bot {
        width: 30rpx;
        height: 30rpx;
        border: 1px solid #999;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .botActive {
        border: 1px solid #e0bb71;
        background-color: #e0bb71;
    }
    .agree {
        color: #e0bb71;
    }
    .continum {
        width: 200rpx;
        height: 80rpx;
        background-color: #e0bb71;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
        color: #333;
        font-weight: bold;
        border-radius: 10rpx;
    }
</style>
